<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <object classid="clsid:B0EF56AD-D711-412D-BE74-A751595F3633" id="JITComVCTKEx" style="height: 0">
    </object>
    <link rel="icon" href="img/logo.png"/>
    <title>广东电网短信管理平台</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="css/mmss.css"> -->
    <script type="text/javascript" src='js/angular/angular.js'></script>
    <script type="text/javascript" src="js/JITHTTPCLIENT.js"></script>
    <!--[if lt IE 9]>
  <script src="js/html5shiv.min.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
    <style>
        html,body {
            height: 100%;
            overflow: hidden;
            font-family: '微软雅黑';
        }
        input{
            padding-left: 5px!important;
        }
        .box {
            background:#171925;
            background-repeat: no-repeat;
            background-size: cover;
            margin: 0 auto;
            position: relative;
            width: 100%;
            height: 100%;
        }
        .navHead,.footbar{
            width: 100%;
            height: 60px;
            position: fixed;
            line-height: 60px;
            z-index: 9;
            background: #fff;
            color: #000;
            left: 0px;
        }
        .navHead{
            top: 0px;
        }
        .navHead span{
            width: 30px;
            height: 24px;
            vertical-align: top;
            margin: 0px 10px 0px 20px;
            display: inline-block;
            background: url('img/logo.png') center bottom no-repeat;
        }
        .navHead h1{
            font-size: 24px;
            margin-left: 0px;
            font-weight: bold;
        }
        .footbar{
            bottom: 0px;
            text-align: center;
        }
        .login-box {
            width: 352px;
            /* height: 420px; */
            position: absolute;
            top: 50%;
            z-index: 9;
            background: #fff;
            border-radius: 7px;
            right: 25%;
            margin-right: -176px;
            /* margin-top: -215px; */
            margin-top: -190px;
            /*设置负值，为要定位子盒子的一半高度*/

        }
        .form {
            width: 100%;
            max-width:500px;
            height: 275px;
            margin: 10px auto 0px auto;
            /* padding-top: 25px; */
        }
        .login-content {
            height: 300px;
            width: 100%;
            max-width:500px;
            background: #fff;
            border-radius:0px 0px 7px 7px;
            float: left;
        }
        .login-bg{
            position: absolute;
            width: 960px;
            height: 518px;
            top: 50%;
            left: 50%;
            margin-top: -259px;
            margin-left: -480px;
            z-index: 1;
            background: url('img/banner.png') center center no-repeat;
        }
        .input-group {
            margin: 0px 0px 18px 0px !important;
        }
        .form-control,
        .input-group {
            height: 40px;
        }

        .form-group {
            margin-bottom: 0px !important;
        }
        .login-title {
            padding: 0px 10px;
        }
        /* .login-title h1 {
            margin-top: 10px !important;
        } */
        .login-title small {
            color: #333;
            font-size: 18px;
        }

        .link p {
            line-height: 20px;
            margin-top: 30px;
        }
        .btn-sm {
            padding: 8px 24px !important;
            font-size: 16px !important;
        }
        .text-white{
            color: white;
        }
    </style>
</head>

<body ng-app='loginPage'>
    <div class="navHead">
        <h1><span></span>广东电网短信管理平台</h1>
    </div>
    <div class="box" ng-controller='login'>
        <br />
        <div class="login-bg"></div>
        <div class="login-box">
            <div class="login-title text-center">
                <h1><small>账号密码登录</small></h1>
            </div>
            <div class="login-content" >
                <div class="form">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input type="text" id="username" ng-model='loginData.username' class="form-control"
                                    placeholder="请输入用户名">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input type="password" id="password" ng-model='loginData.password' class="form-control"
                                    placeholder="请输入密码">
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <div class="col-xs-7" style="margin-bottom: 18px">
                            <input type="text" id="captcha" ng-model='loginData.captcha' class="form-control" placeholder="验证码">
                        </div>
                        <div class="col-xs-5" style="margin-bottom: 18px">
                            <!-- <canvas width=100% height="40" id="verifyCanvas"></canvas>
                            <img id="code_img"> -->
                            <img style="width:120px; height:40px; padding-right: 5px;" src="" ng-click='changeImg()' id="imgCode">
                        </div>
                    </div>
                    <!-- <div class="form-group clearfix">
                        <div class="col-xs-12">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt"></span></span>
                                <input type="" id="phone" ng-model='loginData.phone' class="form-control" placeholder="请输入手机号">
                            </div>
                        </div>
                    </div> -->
                    <!-- <div class="form-group clearfix">
                        <div class="col-xs-4">
                            <input type="text" id="captcha" ng-model='loginData.captcha' class="form-control"
                                placeholder="验证码">
                        </div>
                        <div class="col-xs-8">
                            <input type="button" style="width:100%" class="btn btn-sm btn-default" id="obtainCode"
                                value="获取验证码" ng-click="obtainCode()" />
                        </div>

                    </div> -->
                    <div class="form-group" style="margin-top:18px;">
                        <div class="col-xs-12">
                            <a style="width:100%" class="btn btn-sm btn-primary" ng-click='loginFn()' id="login">登录</a>
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-xs-10">
                            <p class="text-center remove-margin"
                               id="loginTip" ng-bind='loginTip'
                               style="color:red; height:20px; line-height:20px; margin-top: 10px; font-size: 14px;">
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 初始化密码提示修改框 -->
        <div class="modal" id="editPasswordModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">修改初始密码</h4>
                    </div>
                    <div class="modal-body">
                        <div style="padding: 0 10px">
                            <input type="password" class="form-control" ng-model='edit.oldPassword' placeholder="请输入初始密码" id="oldPassword">
                        </div>
                        <div style="padding: 10px">
                            <input type="password" class="form-control" ng-model='edit.newPassword' placeholder="请输入新密码" id="newPassword">
                        </div>
                        <div style="padding: 0 10px">
                            <input type="password" class="form-control" id="confirmPassword" ng-model='edit.confirmPassword' placeholder="请再输入新密码">
                            <!-- onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"  -->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div style="width: 70%;line-height: 17px;color: red;float: left;margin-left: 10px;text-align: left">
                            {{ editErrorMsg }}
                        </div>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" ng-click="editPassword()">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
    <div class="footbar">
        <p>Copyright© 2016-1017 广东电网 版权所有</p>
    </div>


    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="plug/md5.js"></script>
    <script>
        // 判断是否已有页面登入
        if (localStorage.getItem('userid')) {
            location.href = 'index.html';
        }
        // 清除菜单权限url
        if (localStorage.getItem('url')) {
            localStorage.removeItem('url');
        }
        // 移除主页链接
        if (localStorage.getItem('mainUrl')) {
            localStorage.removeItem('mainUrl')
        }

        var loginPage = angular.module('loginPage', []);
        loginPage.controller('login', function ($scope, $http) {

            // 绘制验证码
            // var nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0",
            //     'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
            // ];
            // var strs = '';
            // var verVal = drawCode();
            // 绘制验证码
            // function drawCode() {
            //     var canvas = document.getElementById("verifyCanvas"); //获取HTML端画布
            //     var context = canvas.getContext("2d"); //获取画布2D上下文
            //     context.fillStyle = "cornflowerblue"; //画布填充色
            //     context.fillRect(0, 0, canvas.width, canvas.height); //清空画布
            //     context.fillStyle = "white"; //设置字体颜色
            //     context.font = "25px Arial"; //设置字体
            //     var rand = new Array();
            //     var x = new Array();
            //     var y = new Array();
            //     for (var i = 0; i < 4; i++) {
            //         rand.push(rand[i]);
            //         rand[i] = nums[Math.floor(Math.random() * nums.length)]
            //         x[i] = i * 20 + 10;
            //         y[i] = Math.random() * 20 + 20;
            //         context.fillText(rand[i], x[i], y[i]);
            //     }
            //     strs = rand.join('').toUpperCase();

            //     // 画30个随机点
            //     for (var i = 0; i < 30; i++) {
            //         drawDot(canvas, context);
            //     }
            //     convertCanvasToImage(canvas);
            //     return strs;
            // }
            // 随机点(所谓画点其实就是画1px像素的线，方法不再赘述)
            function drawDot(canvas, context) {
                var px = Math.floor(Math.random() * canvas.width);
                var py = Math.floor(Math.random() * canvas.height);
                context.moveTo(px, py);
                context.lineTo(px + 1, py + 1);
                context.lineWidth = 0.2;
                context.stroke();

            }
            // 绘制图片
            // function convertCanvasToImage(canvas) {
            //     document.getElementById("verifyCanvas").style.display = "none";
            //     var image = document.getElementById("code_img");
            //     image.src = canvas.toDataURL("image/png");
            //     return image;
            // }

            // function resetCode() {
            //     $('#verifyCanvas').remove();
            //     $('#code_img').before('<canvas width="100" height="40" id="verifyCanvas"></canvas>')
            //     verVal = drawCode();
            // }


            // 点击图片刷新
            // document.getElementById('code_img').onclick = function () {
            //     resetCode();
            // }

            // $scope.obtainCode = function () {
            //     $scope.code = $('#codes').val().toUpperCase();
            //     if ($scope.loginData.username != '' || $scope.loginData.password != '') {
            //         if (strs == $scope.code) {
            //             var phone = document.getElementById('phone').value;
            //             if ((/^1[34578]\d{9}$/.test(phone))) {
            //                 var obtainCode = $("#obtainCode");
            //                 obtainCode.attr("disabled", "disabled");
            //                 setTimeout(function () {
            //                     obtainCode.css("opacity", "0.8");
            //                 }, 1000)
            //                 var time = 60;
            //                 var set = setInterval(function () {
            //                     obtainCode.val("(" + --time + ")秒后重新获取");
            //                 }, 1000);
            //                 setTimeout(function () {
            //                     obtainCode.attr("disabled", false).val("重新获取验证码");
            //                     clearInterval(set);
            //                 }, 60000);

            //                 $scope.phoneData = {};
            //                 $scope.phoneData.phone = $scope.loginData.phone;
            //                 $scope.phoneData.userName = $scope.loginData.username;
            //                 console.log($scope.phoneData);

            //                 $http({
            //                     method: 'POST',
            //                     url: '/login/sendSms',
            //                     data: $scope.phoneData,
            //                 }).then(function (response) {
            //                     if (response.data.isSuccess == true) {
            //                         console.log(data);
            //                     } else if (response.data.isSuccess == false) {
            //                         $scope.loginTip = response.data.msg
            //                     }
            //                 }).catch(function () {
            //                     $scope.loginTip = "无法连接到服务器，请检查网络";
            //                 })
            //             } else {
            //                 $scope.loginTip = '手机号不正确';
            //             }
            //         } else {
            //             $scope.loginTip = '验证码不正确';
            //         }
            //     }else {
            //         $scope.loginTip = '请输入用户名和密码';
            //     }
            // }

            //初始化验证码
            $scope.changeImg = function () {
                document.querySelector('#imgCode').src = 'login/captcha' + '?timestamp=' + (new Date()).valueOf();
            };
            $scope.changeImg();

            // 监听键盘回车事件
            document.onkeyup = function (e) {
                var e = e || window.event || arguments.callee.caller.arguments[0];
                var code = e.keyCode;
                if (code == 13) {
                    if(!$scope.loginData.username) {
                        return document.querySelector('#username').focus();
                    }
                    if(!$scope.loginData.password) {
                        return document.querySelector('#password').focus();
                    }
                    if(!$scope.loginData.captcha) {
                        return document.querySelector('#captcha').focus();
                    }
                    // 执行登录操作
                    $scope.loginFn();
                }
            };
            $scope.loginTip = '';
            $scope.loginData = {
                username: '',
                password: '',
                captcha: '',
                // captcha: '',
                userid: '',
                // 'phone': ''
            };
            // 修改初始密码表单
            $scope.edit = {
                oldPassword: '',
                newPassword: '',
                confirmPassword: '',
                userId: ""
            };

            $scope.editErrorMsg = "";

            // 登录成功
            $scope.loginSuccess = function () {
                // 本地存储用户信息
                localStorage.setItem('userid', $scope.loginData.username);
                localStorage.setItem('username', $scope.loginData.username);
                // 重置参数
                $scope.edit = { };
                $scope.loginData = { };
                // 页面重定向，此处没有使用angular的路由管理
                location.href = 'index.html';
            };

            // 登录操作
            $scope.loginFn = function () {
                if(!$scope.loginData.username) {
                    return $scope.loginTip = '账号不能为空';
                }
                if(!$scope.loginData.password) {
                    return $scope.loginTip = '密码不能为空';
                }
                if(!$scope.loginData.captcha) {
                    return $scope.loginTip = '验证码不能为空';
                }
                var loginData = {
                    userid: $scope.loginData.username,
                    username: $scope.loginData.username,
                    password: hex_md5($scope.loginData.password),
                    captcha: $scope.loginData.captcha
                };
                // 判断是否为IE浏览器（返回值，IE：true，非IE：false）
                if(window.ActiveXObject || "ActiveXObject" in window) {
                    var ret = isIeInstalled();
                    if(ret!=0){
                        loginData.isEncrypt = 1;
                        loginInf(loginData);
                    } else {
                        getPublicKey().then(function (res) {
                            if(res) {
                                loginData.userid = p1IeSign( res, $scope.loginData.username );
                                loginData.username = p1IeSign(res, $scope.loginData.username);
                                loginData.password = p1IeSign(res, hex_md5($scope.loginData.password));
                                loginData.isEncrypt = 0;
                                if(!loginData.userid || !loginData.password) {
                                    $scope.loginTip = '用户名或密码加密失败';
                                    return;
                                }
                                loginInf(loginData);
                            }
                        })
                    }
                } else {
                    // 判断是否安装插件，安装则通过插件加密用户名密码，没安装则仍走正常登陆流程
                    var ret = isInstalled();
                    if(ret!=0){
                        loginData.isEncrypt = 1;
                        loginInf(loginData);
                    } else {
                        getPublicKey().then(function (res) {
                            if(res) {
                                loginData.userid = p1Sign( res, $scope.loginData.username );
                                loginData.username = p1Sign(res, $scope.loginData.username);
                                loginData.password = p1Sign(res, hex_md5($scope.loginData.password));
                                loginData.isEncrypt = 0;
                                if(!loginData.userid || !loginData.password) {
                                    $scope.loginTip = '用户名或密码加密失败';
                                    return;
                                }
                                loginInf(loginData);
                            }
                        })
                    }
                }
            };

            // 获取私钥
            function getPublicKey () {
               return $http({
                    method: 'POST',
                    url: '/login/getPrivateKey',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    transformRequest: function (obj) {
                        var str = [];
                        for (var s in obj) {
                            str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));
                        }
                        return str.join("&");
                    }
                }).then(function (response) {
                    return response.data;
                })
            }

            // 登录接口
            function loginInf (loginData) {
                $http({
                    method: 'POST',
                    url: '/login/login',
                    data: loginData,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    transformRequest: function (obj) {
                        var str = [];
                        for (var s in obj) {
                            str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));
                        }
                        return str.join("&");
                    }
                }).then(function (response) {
                    var code = response.data.code;
                    var isSuccess = response.data.isSuccess;
                    // 请求失败
                    if(!isSuccess) {
                        // code为7，表示用户名密码不正确，重置密码
                        if(code == '7'){
                            $scope.loginData.password = '';
                        }
                        // 重置图形验证码
                        $scope.changeImg();
                        $scope.loginData.captcha = '';
                        return $scope.loginTip = response.data.msg;
                    }

                    // 如果用户登录密码为初始密码，则弹窗提示用户修改，不修改无法跳转
                    if($scope.loginData.password == 'CSmm123456') {
                        return $('#editPasswordModal').modal('show');
                    }
                    loginData = { };
                    $scope.loginTip = response.data.msg;
                    $scope.loginSuccess();

                }).catch(function () {
                    $scope.loginTip = "无法连接到服务器，请检查网络";
                })
            }

            // 修改初始密码
            $scope.editPassword = function () {
                if(!$scope.edit.oldPassword) {
                    return $scope.editErrorMsg = "初始密码不能为空";
                }
                if(!$scope.edit.newPassword) {
                    return $scope.editErrorMsg = '新密码不能为空';
                }
                if(!$scope.edit.confirmPassword) {
                    return $scope.editErrorMsg = '请再次输入新密码';
                }
                if($scope.edit.newPassword !== $scope.edit.confirmPassword) {
                    return $scope.editErrorMsg = '两次输入的密码不一致，请重新输入';
                }
                // 检验密码规则是否正确
                // 8到16位，且包含大写字母、小写字母、数字和特殊符号任意三种以上组合
                var passRegx = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,16}$/;
                if (!passRegx.test($scope.edit.newPassword)) {
                    return $scope.editErrorMsg = "请设置8到16位，且包含大写字母、小写字母、数字和特殊符号任意三种以上组合的有效密码!";
                }
                $http({
                    method: 'POST',
                    url: '/login/changePwd',
                    data: {
                        userId: $scope.loginData.username,
                        oldPassword: hex_md5($scope.edit.oldPassword),
                        newPassword: hex_md5($scope.edit.newPassword)
                    },
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    transformRequest: function (obj) {
                        var str = [];
                        for (var s in obj) {
                            str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));
                        }
                        return str.join("&");
                    }
                }).then(function (response) {
                    var isSuccess = response.data.isSuccess;
                    if (!isSuccess) {
                        return $scope.editErrorMsg = data.msg;
                    }
                    $('#editPasswordModal').modal('hide');
                    $scope.loginSuccess();
                });
            }
        });

        debugPlaceholer("请输入用户名", '#username');
        debugPlaceholer("请输入密码", '#password');
        debugPlaceholer("验证码", '#captcha', '30px');

        // 判断是否安装插件（非IE）
        function isInstalled() {
            var initParam = "<?xml version=\\\"1.0\\\" encoding=\\\"utf-8\\\"?>"+
                "<authinfo><liblist>"+
                "<lib type=\\\"CSP\\\" version=\\\"1.0\\\" dllname=\\\"\\\" ><algid val=\\\"SHA1\\\" sm2_hashalg=\\\"sm3\\\"/></lib>"+
                "</liblist></authinfo>";
            var ret = -1;
            ret = JITHTTPCLIENT.RegisterParam(initParam);
            return ret;
        }

        // 判断是否安装插件（IE）
        function isIeInstalled() {
            var ret = 1;
            var InitParam = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\
			<authinfo><liblist>\
			<lib type=\"CSP\" version=\"1.0\" dllname=\"\" ><algid val=\"SHA1\" sm2_hashalg=\"sm3\"/></lib>\
                        </liblist></authinfo>";
            try {
                JITComVCTKEx.Initialize(InitParam);
                ret = JITComVCTKEx.GetErrorCode();
            }catch(e){
                ret = 1;
            }
            return ret;
        }

        // 对登录用户名密码加密(非IE)
        function p1Sign(privateKey, value){
            //公钥(base64),是否公钥证书0:不是 1:是, 原文,原文是否base64 0:否   1:是  ,  0:RSA  1:SM2
            var secretValue = "";
            var message = JITHTTPCLIENT.JITGAsymmetricEncryptStr(privateKey, 2, value, 0, 1);
            var ret = JITHTTPCLIENT.GetErrorCode();
            if(ret===0){
                secretValue = message;
            }
            return secretValue;
        }

        // 对登录用户名密码加密(IE)
        function p1IeSign(privateKey, value){
            //公钥(base64),是否公钥证书0:不是 1:是, 原文,原文是否base64 0:否   1:是  ,  0:RSA  1:SM2
            var secretValue = "";
            try {
                var message = JITComVCTKEx.JITGAsymmetricEncryptStr(privateKey, 2, value, 0, 1);
                var ret = JITComVCTKEx.GetErrorCode();
                if(ret===0){
                    secretValue = message;
                }
            } catch (e) {
                secretValue = '';
            }
            return secretValue;
        }

        function isPlaceholder() {
            var input = document.createElement('input');
            return 'placeholder' in input;
        }

        function debugPlaceholer(str, id, left) {
            if (left) {
                var oLeft = left
            } else {
                var oLeft = '50px'
            }


            if (!isPlaceholder()) {
                var label = document.createElement('label');
                label.style.position = 'absolute';
                label.style.left = oLeft;
                label.style.top = 10 + 'px';
                label.style.zIndex = '999';
                label.style.fontWeight = 'bold';
                label.style.fontSize = '14px';
                label.innerHTML = str;
                label.style.fontWeight = 'normal';
                label.style.color = '#ccc'
                var input = document.querySelector(id);
                var oDiv = input.parentNode
                oDiv.appendChild(label);

                label.onclick = function () {
                    label.style.display = 'none';
                    input.focus();
                }
                input.onfocus = function () {
                    label.style.display = 'none';
                }
                input.onblur = function () {
                    if (input.value == '') {
                        label.style.display = 'block';
                    }
                }
            }
        }
    </script>
</body>

</html>